<template>
  <div id="app">
    <el-form
      :inline="true"
      :model="formSelect"
      class="demo-form-inline"
      ref="formSelect"
    >
      <el-form-item label="姓名" prop="name">
        <el-autocomplete
          clearable
          size="small"
          class="inline-input"
          v-model="formSelect.name"
          :fetch-suggestions="querySearchAsync"
          placeholder="姓名"
        ></el-autocomplete>
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-select
          size="small"
          v-model="formSelect.status"
          clearable
          placeholder="状态"
        >
          <el-option label="异常" value="true"></el-option>
          <el-option label="正常" value="false"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="开始日期" prop="startDate">
        <el-date-picker
          size="small"
          v-model="formSelect.startDate"
          value-format=" yyyy-MM-dd"
          format="yyyy-MM-dd"
          type="date"
          placeholder="开始日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期" prop="endDate">
        <el-date-picker
          size="small"
          v-model="formSelect.endDate"
          value-format=" yyyy-MM-dd"
          format="yyyy-MM-dd"
          type="date"
          placeholder="
结束日期"
        ></el-date-picker>
      </el-form-item>

      <!-- <el-form-item label="学院" prop="collegeName"> -->
      <!-- <el-input size="small" v-model="formSelect.collegeName" clearable placeholder="学院"></el-input> -->
      <!-- </el-form-item> -->

      <el-form-item>
        <el-button
          size="small"
          type="primary"
          @click="getDataList()"
          icon="el-icon-search"
          >查询</el-button
        >
        <el-button size="small" type="warning" @click="getNewDate()"
          ><i class="el-icon-upload el-icon--right"></i>数据导入</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 数据列表 -->

    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%"
    >
      <!-- <el-table-column prop="id" header-align="center" align="center" label="序号">
      </el-table-column>-->
      <el-table-column
        type="index"
        header-align="center"
        align="center"
        label="序号"
        width="50"
      ></el-table-column>
      <el-table-column
        prop="date"
        header-align="center"
        align="center"
        label="打卡日期"
      ></el-table-column>
      <el-table-column
        prop="collegeName"
        header-align="center"
        align="center"
        label="学院"
      ></el-table-column>
      <el-table-column
        prop="stuClass"
        header-align="center"
        align="center"
        label="班级"
      ></el-table-column>
      <el-table-column
        prop="name"
        header-align="center"
        align="center"
        label="姓名"
      ></el-table-column>
      <el-table-column
        prop="punchStatus"
        :formatter="punchFormatter"
        header-align="center"
        align="center"
        label="打卡状态"
      >
      </el-table-column>
      <el-table-column
        prop="spotStatus"
        :formatter="spotFormatter"
        header-align="center"
        align="center"
        label="抽查状态"
      >
      </el-table-column>
      <el-table-column
        prop="out"
        :formatter="outFormatter"
        header-align="center"
        align="center"
        label="出入登记"
      >
      </el-table-column>
      <!-- 暂定中 -->
      <el-table-column
        prop="status"
        header-align="center"
        align="center"
        label="总状态"
      >
        <template v-slot="scope">
          <span v-if="scope.row.status == true">异常</span>
          <span v-else>正常</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="dormitory"
        header-align="center"
        align="center"
        label="寝室"
      ></el-table-column>
      <!-- 处理详情页 -->
      <el-table-column
        header-align="center"
        align="center"
        label="操作"
        fixed="right"
        width="270px"
      >
        <template slot-scope="scope">
          <el-button type="success" size="small" @click="write(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      background
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
    <!-- 处理 -->
    <el-drawer
      title="详情页"
      :visible.sync="drawer"
      direction="rtl"
      size="40%"
      ref="drawer"
    >
      <div class="demo-drawer__content">
        <el-form :model="form" label-position="right">
          <!-- 图片 -->
          <el-row class="mar">
            <el-col
              :span="8"
              v-for="(o, index) in 1"
              :key="o"
              :offset="index > 0 ? 2 : 0"
            >
              <el-card :body-style="{ padding: '10px' }">
                <img src="" class="image" />
                <div style="padding: 10px; font-size: 12px">
                  <span>暂无</span>
                  <div class="bottom clearfix">
                    <time class="time">{{ form.date }}</time>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!--  -->
          <el-form-item label="姓名" label-width="120px">
            <el-autocomplete
              class="input-new-tag"
              :disabled="true"
              v-model="form.name"
              ref="saveTagInput"
              :trigger-on-focus="false"
              style="width: 220px"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="班级" label-width="120px">
            <el-autocomplete
              :disabled="true"
              class="input-new-tag"
              v-model="form.stuClass"
              ref="saveTagInput"
              :trigger-on-focus="false"
              style="width: 220px"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item
            size="small"
            label="备注"
            prop="remark"
            label-width="120px"
          >
            <el-input
              v-model="form.remark"
              style="width: 220px"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item style="margin-left: 55px; margin-right: 60px">
            <el-button size="small" @click="cancelForm">关闭</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
    <!--  -->
  </div>
</template>

<script>
import {
  getManagementList,
  getImportDta,
  getStudentListByLikeName,
} from '../../api/src/ClockManageList/ClockManageList'
export default {
  name: 'ClockManageList',
  data() {
    return {
      src: '',
      formSelect: {
        collegeName: '',
        date: '',
        stuClass: '',
        name: '',
        punchStatus: '',
        spotStatus: '',
        out: '',
        status: '',
        remark: '',
        dormitory: '',
        endDate: '',
        startDate: '',
      },
      dataList: [],
      drawer: false,
      drawerplus: false,
      parent: [],
      parentnew: [],
      parentnewone: [],
      pageIndex: 1,
      pageSize: 10,
      password: 2018,
      totalPage: this.totalPage,
      dataListLoading: false,
      selectionDataList: [],
      commitType: true,
      form: {
        collegeName: '',
        date: '',
        stuClass: '',
        name: '',
        punchStatus: '',
        spotStatus: '',
        out: '',
        dormitory: '',
        remark: '',
      },
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    getNewDate() {
      this.$confirm(
        '该数据通常定时自动生成，无特殊情况无需手动导入，确定要重新导入自动生成的数据吗?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          getImportDta().then((res) => {
            this.$message({
              showClose: true,
              message: res,
              type: 'warning',
            })
          })
        })
        .catch(() => {})
    },
    // 获取数据列表
    async getDataList() {
      this.dataListLoading = true
      this.dataList = []
      let parameter
      parameter =
        '?currentPage=' + this.pageIndex + '&pageSize=' + this.pageSize
      if (this.formSelect.name.length > 0) {
        parameter += '&stuName=' + this.formSelect.name
      }
      if (this.formSelect.status.length > 0) {
        parameter += '&status=' + this.formSelect.status
      }
      if (this.formSelect.startDate.length > 0) {
        parameter += '&startDate=' + this.formSelect.startDate.trim()
      }
      if (this.formSelect.endDate.length > 0) {
        parameter += '&endDate=' + this.formSelect.endDate.trim()
      }
      console.log('选择条 》》', parameter)
      await getManagementList(parameter).then((res) => {
        //console.log('roleManagement::::::::>>>>', res)
        if (res.records === 0) {
          this.dataList = []
          this.totalPage = 0
        } else {
          this.dataList = res.records
          this.totalPage = res.total
        }
        this.dataListLoading = false
      })
    },
    //
    write(row) {
      console.log(row)
      if (row != null) {
        this.commitType = false
        this.form.collegeName = row.collegeName
        this.form.date = row.date
        this.form.stuClass = row.stuClass
        this.form.name = row.name
        this.form.punchStatus = row.punchStatus
        this.form.spotStatus = row.spotStatus
        this.form.out = row.out
        this.form.dormitory = row.dormitory
        this.form.remark = row.remark
      } else {
        this.form.collegeName = ''
        this.commitType = true
        this.form.date = ''
        this.form.stuClass = ''
        this.form.name = ''
        this.form.punchStatus = ''
        this.form.spotStatus = ''
        this.form.remark = ''
        this.form.out = ''
        this.form.dormitory = ''
      }
      this.drawer = true
      this.drawerplus = false
    },
    //  下拉表
    querySearchAsync(queryString, callback) {
      var list = [{}]
      var restaurants = this.restaurants
      getStudentListByLikeName(queryString).then((res) => {
        //在这里为这个数组中每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示
        for (let i of res) {
          i.value = i.userName //将想要展示的数据作为value
        }
        list = res
        callback(list)
      })
    },
    //
    statusChange(value) {
      this.formSelect.termid = value
      if (value.length == 0) {
        return
      }
      getWeekList(value).then((res) => {
        this.weekData = res
      })
    },
    //  取消
    cancelForm() {
      this.drawer = false
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 每页数
    sizeChangeHandle(val) {
      this.dataList = []
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList(this.ck)
    },
    // 当前页
    currentChangeHandle(val) {
      this.dataList = []
      this.pageIndex = val
      this.getDataList(this.ck)
    },
    // 外出格式化
    outFormatter(row, column) {
      const obj = {
        10: '未出寝室',
        20: '出寝室',
        30: '出寝室回来',
      }
      return obj[row.out]
    },

    // 打卡格式化
    punchFormatter(row, column) {
      const obj = {
        0: '未打卡',
        10: '正常打卡',
        20: '补打卡',
        30: '晚归打卡',
        40: '晚归打卡',
        50: '夜不归宿',
        60: '不在范围内',
        70: '无需打卡',
      }
      return obj[row.punchStatus]
    },

    // 抽查格式化
    spotFormatter(row, column) {
      const obj = {
        10: '无需检查',
        20: '未检查',
        30: '检查在寝室',
        40: '检查不在寝室',
      }
      return obj[row.spotStatus]
    },
  },
}
</script>

<style>
.mar {
  margin-left: 40px;
  margin-bottom: 40px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}
</style>
